<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="row">
		    <div class='col-sm-6'>
		        <div class="form-group">
		            <label>选择开始时间：</label>
		            <!--指定 date标记-->
		            <div class='input-group date' id='datetimepicker1'>
		                <input type='text' class="form-control" />
		                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
		            </div>
		        </div>
		    </div>
		    <div class='col-sm-6'>
		        <div class="form-group">
		            <label>选择结束时间：</label>
		            <!--指定 date标记-->
		            <div class='input-group date' id='datetimepicker2'>
		                <input type='text' class="form-control" />
		                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
		            </div>
		        </div>
		    </div>
		</div>

	<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
		    var picker1 = $('#datetimepicker1').datetimepicker({
		        format: 'YYYY-MM-DD',
		        locale: moment.locale('zh-cn'),
		        //minDate: '2016-7-1'
		    });
		    var picker2 = $('#datetimepicker2').datetimepicker({
		        format: 'YYYY-MM-DD',
		        locale: moment.locale('zh-cn')
		    });
		    //动态设置最小值
		    picker1.on('dp.change', function (e) {
		        picker2.data('DateTimePicker').minDate(e.date);
		    });
		    //动态设置最大值
		    picker2.on('dp.change', function (e) {
		        picker1.data('DateTimePicker').maxDate(e.date);
		    });
		});
	</script>
	</body>
</html>
